<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/gongy.css"/>
    <link rel="stylesheet" type="text/css" href="css/listgy.css"/>
    <link rel="stylesheet" type="text/css" href="css/zixlist.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!-- 主界面移动、菜单不动 -->
	<div class="mui-off-canvas-wrap mui-draggable">
	  <!-- 菜单容器 -->
	  <aside class="mui-off-canvas-left" id="offCanvasSide">
	    <div class="mui-scroll-wrapper">
	      <div class="mui-scroll">
	        <!-- 菜单具体展示内容 -->
	     		<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="index.html">首页</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="congz.html">丛书展示</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="zixlist.html">咨讯中心</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="about.html">关于我们</a>
				    </li>
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right" href="lianxi.html">联系我们</a>
				    </li>
				</ul>
	      </div>
	    </div>
	  </aside>
	  <!-- 主页面容器 -->
	  <div class="mui-inner-wrap">
	    <!-- 主页面标题 -->
	    <header class="mui-bar mui-bar-nav biaotop congti">
	    	<a class="mui-btn iconfont congbtn01" href="javascript:history.go(-1)">&#xe608;返回</a>
	    	<a class="mui-btn iconfont congbtn02" href="">&#xe600;</a>
	    </header>
	    <span class="congtop">
	    	<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"  href="#offCanvasSide" ></a>
	    	 <h4>咨询中心</h4>
	    </span>
	    <nav class="mui-bar mui-bar-tab xialan">
		    <a class="mui-tab-item mui-active" href="index.html">
		        <span class="mui-icon iconfont">&#xe606;</span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon iconfont">&#xe605;</span>
		        <span class="mui-tab-label">QQ</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon iconfont">&#xe60a;</span>
		        <span class="mui-tab-label">公司介绍</span>
		    </a>
		    <a class="mui-tab-item" href="lianxi.html">
		        <span class="mui-icon iconfont">&#xe604;</span>
		        <span class="mui-tab-label">联系我们</span>
		    </a>
		</nav>
	    <div class="mui-content mui-scroll-wrapper bluebg" id="refreshContainer">
	      <div class="mui-scroll">
	        <!-- 主界面具体展示内容 -->
	        	<div class="congban"></div>
	         	<div class="cong_list">
	         			<div class="clist_top zixun_tit">
		         			<h4>最新动态</h4>
			         		<h5>News</h5>
		         		</div>
				                <!--列表一定要放到容器内,因为会有一个div append到mui-scroll中,需要在底部才能起作用-->
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell mui-media">
		                        <a class="congl_tu" href="newxiang.html">
		                            <img class="mui-media-object mui-pull-left" src="images/zbook01.jpg"/> 
		                        </a>
	                            <div class="mui-media-body congwen">
	                                <h4><a href="newxiang.html">带一本书去旅游</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱的人一起睡觉，是件幸福的事情；可是能和心...<a class="gengduo" href="#">【更多】</a></p>
	                            	<p><span class="zx_riqi">08月22日</span><span class="zx_time">14:02</span></p>
	                            </div>
		                    </li>
		                   <li class="mui-table-view-cell mui-media">
		                        <a class="congl_tu" href="newxiang.html">
		                            <img class="mui-media-object mui-pull-left" src="images/zbook01.jpg"/> 
		                        </a>
	                            <div class="mui-media-body congwen">
	                                <h4><a href="newxiang.html">带一本书去旅游</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱的人一起睡觉，是件幸福的事情；可是能和心...<a class="gengduo" href="#">【更多】</a></p>
	                            	<p><span class="zx_riqi">08月22日</span><span class="zx_time">14:02</span></p>
	                            </div>
		                    </li>
		                    <li class="mui-table-view-cell mui-media">
		                        <a class="congl_tu" href="newxiang.html">
		                            <img class="mui-media-object mui-pull-left" src="images/zbook01.jpg"/> 
		                        </a>
	                            <div class="mui-media-body congwen">
	                                <h4><a href="newxiang.html">带一本书去旅游</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱的人一起睡觉，是件幸福的事情；可是能和心...<a class="gengduo" href="#">【更多】</a></p>
	                            	<p><span class="zx_riqi">08月22日</span><span class="zx_time">14:02</span></p>
	                            </div>
		                    </li>
		                    <li class="mui-table-view-cell mui-media">
		                        <a class="congl_tu" href="newxiang.html">
		                            <img class="mui-media-object mui-pull-left" src="images/zbook01.jpg"/> 
		                        </a>
	                            <div class="mui-media-body congwen">
	                                <h4><a href="newxiang.html">带一本书去旅游</a></h4>
	                                <p class="mui-ellipsis"/>>>>能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱的人一起睡觉，是件幸福的事情；可是能和心...<a class="gengduo" href="#">【更多】</a></p>
	                            	<p><span class="zx_riqi">08月22日</span><span class="zx_time">14:02</span></p>
	                            </div>
		                    </li>
		                </ul>
				</div>
		  </div>
	    </div> 
	    <div class="mui-off-canvas-backdrop"></div>
	  </div> 
	</div>
	<script type="text/javascript">
		mui('body').on('tap','a',function(){document.location.href=this.href;});
		mui.init({
		    pullRefresh : {
		        container:"#refreshContainer",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
		        up : {
		            height:50,// 可选.默认50.触发上拉加载拖动距离
		            auto:false,// 可选,默认false.自动上拉加载一次
		            contentrefresh : "Please later",// 可选，正在加载状态时，上拉加载控件上显示的标题内容
		            contentnomore:'没有更多数据了',// 可选，请求完毕若没有更多数据时显示的提醒内容；
		            callback : function() {
		            	pullupRefresh();
//		                var self = this; // 这里的this == mui('#refreshContainer').pullRefresh()
//		                // 加载更多的内容
//		                loadMore(this);
		            } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		        }
		    }
		});
		
		var count = 0;
		var zixstr={
			listimg:"images/zbook01.jpg",
			bookname:"带一本书去旅游",
			jianyao:"能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱的人一起睡觉，是件幸福的事情；可是能和心爱的人",
			yue:08,
			ri:22,
			shi:13,
			fen:55
		}
		//上拉加载内容获取
		function pullupRefresh() {
				setTimeout(function() {
					mui('#refreshContainer').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('#refreshContainer .mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 20; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell  mui-media';
						li.innerHTML +='<a class="congl_tu" href="newxiang.html"><img class="mui-media-object mui-pull-left" src='+zixstr.listimg+'/></a>';
						li.innerHTML +='<div class="mui-media-body congwen"><h4><a href="newxiang.html">'+zixstr.bookname+'</a></h4><p class="mui-ellipsis"/>>>>'+zixstr.jianyao+'...<a class="gengduo" href="#">【更多】</a></p><p><span class="zx_riqi">'+zixstr.yue+'月'+zixstr.ri+'日</span><span class="zx_time">'+zixstr.shi+':'+zixstr.fen+'</span></p></div>'
					   table.appendChild(li);
					}
				}, 1500);
			}
	</script>
</body>
</html>